<template>
  <div>
    <h3>文字编辑</h3>
    <div class="content">
      <el-card  shadow="never">
        <el-form :inline="false" :model="form">
          <el-form-item label="" prop="content">
            <mavon-editor v-model="form.contentHtml"
                          class="formContent"
                          :editable="!check"
                          :subfield="!check"
                          defaultOpen="preview"
                          scrollStyle
                          :ishljs="true"
                          :toolbarsFlag="!check" />
          </el-form-item>
          <el-form-item>
            <el-button style="float: right" type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
    import { mavonEditor } from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    export default {
        name: "Markdown",
        data(){
            return{
                check:false,
                form:{
                    content:null,
                    contentHtml:null
                }
            }
        },
        methods:{
            onSubmit(){
                console.log(this.form);
            },
        },
        components:{
            mavonEditor,
        }
    }
</script>

<style scoped>
  @media screen and (max-width: 768px){
    .div-right{
      padding: 10px;
      display: inline-block;
    }
  }
  @media screen and (min-width: 768px){
    .div-right{
      width: 40%;
      padding: 10px;
      display: inline-block;
      float: right;
    }
  }
  .content{
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  }
  h3{
    color: #409EFF;
    padding: 20px;
    margin-left: 7%;
    font-size: 40px;
  }
</style>
